L'objectif de ce cours n'est pas de faire de vous des codeurs de JavaScript experts, mais simplement de vous donner les clés qui vous permettront d'explorer ce langage.

Javascript est un langage de programmation coté client (tout se passe sur votre machine) à contrario de php qui lui est déporté coté serveur.

C'est un langage qui va nous permettre de créer de l'interaction entre l'utilisateur et le client.

Une page web basique pour travailler.

Où placer le javascript

• Dans l’élément head d’une page HTML ;
• Dans l’élément body d’une page HTML ;
• Dans un fichier portant l’extension .js séparé.

Dans l'élément head

Dans ce cas, il faudra placer le JavaScript à l’intérieur d’une balise script.

On placera généralement l’élément script à la fin de notre élément head.

<script> alert("Au secours !!");</script>

Dans l'élément body

Dans ce cas aussi, il faudra placer le JavaScript à l’intérieur d’une balise script.

<script> alert("Au secours !!");</script>

Dans un fichier séparé

C’est très souvent la méthode recommandée dans le cas de gros projets car elle permet une meilleure maintenabilité du code grâce à la séparation des langages, et car on va pouvoir réutiliser un même code JavaScript dans plusieurs fichiers HTML.

Dans ce cas, nous allons devoir lier nos fichiers HTML et JavaScript en utilisant à nouveau un élément script et son attribut src.

Par exemple, si l'on souhaite lier un fichier JavaScript script.js à un fichier HTML placé dans le même dossier nous écrirons à la fin du body:

<script src="script.js"> </script>

Dans le fichier script.js, on pourra écrire par exemple :

alert("JS...easy !");

Indenter et commenter

Indenter

Pour savoir quand indenter, il suffit de penser en terme de hiérarchie comme on le faisait déjà en HTML.

Une bonne pratique est d'effectuer un retrait vers la droite équivalent à une tabulation à chaque fois qu'on écrit une nouvelle ligne de code à l'intérieur d'une instruction JavaScript.

Commenter

On commente en js comme on commente en CSS :

/* ceci est un commentaire */

Variables

Une variable JavaScript est un conteneur servant à stocker temporairement une information. Comme un langage de programmation comme python.

Contrairement à Python, il faudra déclarer les variables. Avec des noms suivant les règles d'hygiène déjà soulignées précédemment du type camelCase.

Le nom des variables est sensible à la casse, c'est à dire qu'une variable portant le nom a n'est pas la même que celle qui porte le nom A.

pour observer nos variables nous les afficherons dans la console de votre navigateur.

Dans tout ce cours nous allons travailler sur un fichier html que l'on complétera/modifiera à volonté. Vous pouvez prendre un fichier html à vous ( cahier de bord ) ou télécharger celui-ci fichier Html de base.

On observera le résultat de nos codes dans un navigateur et dans la console (F12 suivi de l'onglet console ).

A chaque fois que nous terminerons un exercice il faudra le mettre en commentaire pour éliminer les interactions avec les exercices suivants.

Il y a trois manières de déclarer une variable en JS : let, constet var

L'instruction let

Elle permet de déclarer une variable de manière globale ou locale de manière simple :

<script>
    let maVar = false;
    console.log(maVar);
</script>

        

Il n’est pas obligatoire de déclarer une variable avec sa valeur initiale. Cela peut-être fait ensuite.

<script>
    let maVar2;
    console.log(maVar2);
 </script>

Comme c’est une variable, on peut modifier sa valeur après sa déclaration :

<script>
    maVar=true;
    console.log(maVar);
    maVar=maVar+maVar;
    console.log(maVar);
</script>
        

Une variable déclarée avec let peut être

• globale si on déclare la variable au début d'élément script :

  
  <script>
  let maVar=1;
  console.log(maVar);
  if (true)
  {
      maVar+=2;
      console.log(maVar);
  }
  maVar+=1;
  console.log(maVar);
  </script>
              

• locale si on déclare la variable à l'intérieur bloc courant. C'est à dire entre deux accolades à l'intérieur d'une fonction, d'un if , d'un for...

  
  <script>
  
  if (true)
  {
      let maVara=2;
      console.log(maVara);
  }
  maVar+=1;
  console.log(maVara);
  </script>
  

<script>
    let maVar2 = "j'ai changé de valeur !"
    console.log(maVar2);
    {
        let maVar3 ="je suis nouvelle";
        maVar2=" je suis modifiée dans le bloc";
        console.log(maVar3);
        console.log(maVar2);
    }
    console.log(maVar2);
    console.log(maVar3);
    
</script>
        

L'instruction const

A l’inverse de let, const a besoin d’être déclaré avec une valeur initiale.

    <script>
    const maVar4;
    </script>

La variables déclarées avec l'instruction const peut être globale ou locale comme avec l'instruction let.

const est pour constante.Cette instruction permet de déclarer une variable à assignation unique.

Si la variable définit un est flottant ou un entier ou encore une chaine de caractère, on peut considérer que la variable est constante et donc elle ne pourra pas être modifiée.

<script>
    const maVar="je suis une constante !";
    console.log(maVar);
    maVar="Puisque je vous dis que je suis une constante !!!"
</script>
            

Par contre si la variable est un tableau, on ne peut tout à fait modifier le tableau sans en changer sa nature.

<script>
    const tabl = [];
    console.log(tabl);
    tabl.push(1);
    console.log(tabl);
    tabl.push(2);
    console.log(tabl);
    tabl.push("j'ai compris");
    console.log(tabl);
</script>
        

L'instruction var

L'instruction var est à éviter depuis 2015 (ES6).

La variable var est ,globale

Utilisez les instructions let et const.

• Déclarer une variable et lui assigner une valeur immédiatement ;

  var x = 12;

• Déclarer une variable sans lui assigner de valeur et lui assigner une valeur plus tard ;

  var temps;
  temps = 2;
              

• Déclarer plusieurs variables en même temps.

  var x = 12, prénom = "jean", nom = "neymar";

Bilan

En définitive retenez qu'on privilégiera l'usage de const en 1 et de let en 2 et on évitera var.

<script>
    alert("12 Mars 1989 : première version du Web");
</script>
                    

Les fonctions.

La définition d'une fonction est introduite par le mot clé function suivi de ses arguments, puis du code de la fonction entre accolades { }

Le résultat de la fonction est indiqué par le mot-clé return.

function carre(i){
    return(i*i)
    }
     

Cette déclaration peut se faire à l'intérieur de l'élément head (dans un élément script) ou bien directement dans un fichier .js, comme nous l'avons vu précédemment. Mais cette déclaration ne doit pas se faire à l'intérieur de l'élément body.

Cette procédure permet de déclarer une fonction, il faut maintenant afficher le résultat.

<script> document.write("La fonction renvoie",carre(2),".");</script>

<script> document.write("<h1>Ceci est un titre de niveau 1 en HTML</h1>");</script>

for (i=3; i<10;i++){ } 

la méthode prompt().

La méthode prompt fournit un moyen simple de récupérer une information provenant de l'utilisateur, on parle alors de boîte d'invite. La méthode prompt() requiert deux arguments :

• le texte d'invite
• la chaîne de caractères par défaut dans le champ de saisie

function demande(){
                x=prompt("quel âge as tu?","réponse")
                    return x
                }

<script> document.write(demande());</script>

Les événements : Interaction utilisateur/client

Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est possible d'associer des fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, ...

La syntaxe d'un gestionnaire d'événement est la suivante :

onEvenement="Action_Javascript_ou_Fonction();"

<p onClick="alert('METTRE DE LA COULEUR');">Cliquez ici</p>

querySelector()

La méthode querySelector() sélectionne le premier élément dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.

function text_rouge(){
document.querySelector("p").style.color="red"
}

<p onclick="text_rouge()">Je veux du rouge !</p>

Vous devriez observer que seulement votre premier élément dans le sélecteur p est coloré. C'est normal, rappelez vous que la méthode querySelector() ne sélectionne que le premier sélecteur de la page.

Pour remédier à cela il va falloir donner un id au sélecteur de votre choix

<p id="r" onclick="text_rouge()">Je veux du rouge !</p>

function text_rouge(){
                document.querySelector("#r").style.color="red"
                }

Nous avons fait appel au sélecteur id et #, nous aurions pu utiliser class et .

Un exemple avec un bouton

Pour finir, nous allons intégrer à notre page un bouton qui va nous permettre de fermer la page par un ou deux clics.

Cela nous permettra de voir un exemple avec une structure conditionnelle "if"

function quit()
        {
            if (confirm("Tu veux vraiment partir? :'("))
            {
                alert("à bientôt !");
                close();
            }
        }

<button onclick="test()">Tester le bouton</button>

Nous reviendrons sur le JavaScript plus tard dans l'année quand nous ferons des formulaires par exemple.

Projet

Votre travail est de réaliser un script Javascript commenté que vous intégrerez dans votre site.

Vous réaliserez une vidéo de deux minutes maximum qui montre votre travail (code + effet)

Ce n'est pas chose aisée, venez nous voir, fouillez sur le net dans la sitographie par exemple.

Si cela vous semple compliqué, réaliser l'exercice suivant :

Vous pouvez également par exemple :
• cacher du texte et le faire apparaître avec un clic (comme une solution d'exercice)
• cacher du texte dans du texte (comme une définition)
• ...

Sitographie

• https://www.w3schools.com/js/DEFAULT.asp
• https://www.pierre-giraud.com/javascript/cours-complet/javascript-presentation.php
• https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector